<template>
     
    <div class="right-list">
      <div class="title">
             <div class="button">
                  <p v-on:click="add()">新增</p> 
                  <p v-on:click="change()">修改</p> 
                  <p v-on:click="dele()">删除</p> 
              </div>
      </div>
        <ul class="list"> 
          <li class="list-title"><span v-for="(title,index) in currentTitles" v-bind:key="index">{{title}}</span></li>
          <li class="list-data" v-for="(items,index) in currentDetailList" v-bind:key="index" v-on:click="selected(index,$event)" >
            <span v-for="(value,index) in items" v-bind:key="index">{{value}}</span>
          </li>
        </ul>
      
        <my-toast class="toast" v-show = "showAdd">
           <system-form :titleList="currentTitles" @confirm = "addData" @cancel = "cancel"></system-form>
        </my-toast>

         <my-toast class="toast" v-show = "showChange">
           <system-form :titleList="currentTitles" @confirm = "changeData" @cancel = "cancel" ></system-form>
        </my-toast>
      
       
    </div>

</template>
<script>
import myToast from '../components/my-toast';
import systemForm from '../components/system-form';

export default {
  data() {
    return {
      systemData: {
        titles: ["顺序号", "门类编码", "门类名称"],
        list: [
          [
            ["11", "aa", "档案1"],
            ["12", "ab", "档案2"],
            ["13", "ac", "档案3"],
            ["14", "ad4", "档案4"],
            ["15", "ae5", "档案5"],
            ["16", "af6", "档案6"],
            ["17", "ag7", "档案7"],
            ["18", "ah8", "档案8"]
          ],
          [
            ["21", "bb", "统计1"],
            ["22", "cc", "统计2"],
            ["23", "dd", "统计3"],
            ["24", "ee", "统计4"],
            ["25", "ff", "统计5"],
            ["26", "gg", "统计6"],
            ["27", "hh", "统计7"],
            ["28", "kk", "统计8"]
          ],
          [
            ["31", "ii", "1报表"],
            ["32", "jj", "2报表"],
            ["33", "ww", "3报表"],
            ["34", "xx", "4报表"],
            ["35", "yy", "5报表"],
            ["36", "zz", "6报表"],
            ["37", "vv", "8报表"],
            ["38", "uu", "9报表"]
          ]
        ]
      },
      grandData: {
        titles: ["用戶名", "所在部門", "但任崗位","員工名"],
        list: [
          [
            ["11", "gga", "111档案","李磊"],
            ["12", "ggb", "222档案","王丽"],
            ["13", "ggc", "3333档案","田娜"],
            ["14", "ggf", "4444档案","名开"],
            ["15", "ggy", "55555档案","a"],
            ["16", "ggu", "6666档案","aa"],
            ["17", "ggkwe", "8888档案","aa"],
            ["18", "wjjek", "999档案","aa"]
          ],
          [
            ["21", "hh", "9999数据","价格开"],
            ["22", "whghe", "999数据","个风格"],
            ["23", "ooo", "777数据","地方"],
            ["24", "ouiouwe", "666数据","反弹"],
            ["25", "erwe", "555数据","带头人"],
            ["26", "erewe", "4444数据","山东省"],
            ["271", "rtrtwe", "3333数据","同仁"],
            ["281", "ttwe", "2222数据","突然"]
          ],
          [
            ["1", "trtwe","1管理","bb"],
            ["1", "ttt", "2管理","bb"],
            ["1", "aaa", "3管理","bb"],
            ["1", "dddd", "4管理","bb"],
            ["1", "rrr", "5管理","bb"],
            ["1", "yyy", "6管理","bb"],
            ["1", "iii", "7管理","bb"],
            ["1", "oooo", "8管理","bb"]
          ]
        ]
      },
      currentDetailList: [],
      currentTitles: [],
      opationindex: -1,
      number: "",
      code: "",
      name: "",
      showAdd:false,
      showChange:false
    };
  },
  created: function() {
    this.checkType();
  },
  methods: {
    checkType() {
      var that = this;
      var type = that.$route.query.type;
      var id = that.$route.query.id;
      console.log("类型", type);

      switch (type) {
        case "system": {
          that.currentTitles = that.systemData.titles;
          that.currentDetailList = that.systemData.list[id];
          break;
        }

        case "grant": {
          that.currentTitles = that.grandData.titles;
          that.currentDetailList = that.grandData.list[id];
          break;
        }
        default: {
          that.currentTitles = ["暂无数据"];
          that.currentDetailList = [];
        }
      }
    },
    selected: function(index,event) {
      this.opationindex = index;
      console.log("选中的索引", this.opationindex);
      console.log("选中的对象",event.target);

    },
    addData: function(allData) {
    var detail = this.currentTitles.map(function(title){
      return   allData[title];
    });
      this.currentDetailList.push(detail);
      this.showAdd = false;
    
    
           
    },
    cancel:function(){
       this.showAdd = false;
         this.showChange = false;

    },
    changeData:function(allData){
     
      var detail = this.currentTitles.map(function(title){
      return   allData[title];
     });
      this.currentDetailList[this.opationindex] = detail;
      this.showChange = false;
    
      
       
    },
  
    add:function(){
          this.showAdd =true;
    },
    change:function(){
      if(this.opationindex<0){
        return;
      }
        this.showChange = true;
    },
    dele() {
      console.log("索引",this.opationindex);
      if(this.opationindex == -1){
        return;
      }
      this.currentDetailList.splice(this.opationindex, 1);
      this.opationindex = -1;
    }
  },
  watch: {
    $route: function() {
      this.checkType();
    }
  },
  
  components: { myToast ,systemForm}
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
@import '../assets/sss/utiles.scss';
.right-list {
  width: 100%;
  height: 100%;
  overflow: scroll;
  .title {
    width: 100%;
    background: #eee;

    ul {
      height: 100%;
      width: 100%;
      background: wheat;
      @include flex;
      li {
        padding: 5px 20px 5px 10px;
        border-right: 1px solid #ccc;
      }
    }
  }

  .list {
    width: 100%;

    & > * {
      padding-left: 20px;
    }
    .list-title {
      background: rgb(189, 167, 107);
    }
    span {
      display: inline-block;
      margin-right: 20px;
      width: 15%;
    }
    ul {
      overflow: scroll;
      li {
        span {
          display: inline-block;
          padding-right: 20px;
          border-right: 1px solid #ccc;
        }
      }
    }
  }
}
</style>